<template>
  <!-- 添加或修改对话框 -->
  <lam-dialog title="选择商品" :visible.sync="open" width="60%" append-to-body @close="cancel">
    <!-- 查询区域 -->
    <el-form :model="queryParams" :ref="queryFormRef" inline v-show="showSearch" label-width="auto" @keyup.enter.native="handleQuery">
        <el-form-item label="关键字" prop="keywords" >
          <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item label="商品分类" prop="categoryId">
          <el-input v-model="queryParams.categoryId" placeholder="商品分类" clearable />
        </el-form-item>
        <el-form-item label="上架时间" prop="putawayTimeBegin">
          <el-date-picker clearable v-model="queryParams.putawayTimeBegin" value-format="yyyy-MM-dd" type="date" placeholder="上架时间">
          </el-date-picker> -
        </el-form-item>
        <el-form-item prop="putawayTimeEnd">
          <el-date-picker clearable v-model="queryParams.putawayTimeEnd" value-format="yyyy-MM-dd" type="date" placehodelr="上架时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-table :ref="dataTableRef" v-loading="loading" :data="dataList" stripe border @selection-change="onSelectChange"
          :default-sort = "defaultSort" @sort-change="onSortChange" :row-key="rowKey">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" width="140" label="商品图片">
        <template slot-scope="{row}"><img :src="resourceUrl + row.pic " width="80"/></template>
      </el-table-column>
      <el-table-column prop="prodName" header-align="center" align="center" label="商品名称"/>
    </el-table>
    <pagination v-show="!loading" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"  @pagination="getList" />

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ok">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </lam-dialog>
</template>

<script>
  import { IndexListMixin } from '@/components/mixins/IndexListMixin';

export default {
  name: "SelectProduct",
  mixins:[IndexListMixin],
  props: {
    multipleSelect: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      open: false,
      // 查询参数
      queryParams: {
        keywords: null,
        categoryId: null,
        status: 1,
        putawayTimeBegin: null,
        putawayTimeEnd: null,
        pageNum: 1,
        pageSize: 10
      },
      url: {
      	list: '/mall/product/list'
      }
    }
  },
  computed:{
    resourceUrl() {
      return this.$store.getters.resourceUrl
    }
  },
  methods: {
    // 获取数据列表
    getList() {
      this.loadData(this.url.list);
    },

    // 多选框选中数据
    onSelectChange(selection) {
      this.selectedRows = selection
      this.selectedRowKeys = selection.map(item => item[this.rowKey]);
      if(selection && selection.length > 1 && !this.multipleSelect){
        this.$refs[this.dataTableRef].clearSelection();
        this.$refs[this.dataTableRef].toggleRowSelection(selection[selection.length-1], true);
      }
    },

    // 确定事件
    ok () {
      if (!this.selectedRows.length) {
        this.msgError("请选择商品");
        return
      }
      if(this.multipleSelect){
        this.$emit('ok', this.selectedRowKeys, this.selectedRows )
      }else{
        this.$emit('ok', this.selectedRowKeys[0], this.selectedRows[0] )
      }
      this.cancel()
    },

    show(){
      this.open = true
      this.getList();
    },
    cancel(){
      this.$refs[this.dataTableRef].clearSelection();
      this.open = false
    }
  }
}
</script>
